<template>
	<view>
		<button class="button" @tap="open">打开操作菜单</button>

		<ch-action-menu v-model="show" :list="list" :cancleText="cancleText" :tips="tips" :tipsStyle="tipsStyle"
			:itemStyle="itemStyle" :cancleStyle="cancleStyle" :maskCloseAble="maskCloseAble" @click="click">
		</ch-action-menu>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				maskCloseAble: true,
				cancleText: '自定义取消按钮文字',
				tips: '这里是顶部提示，可以为空',
				// 自定义顶部提示的样式
				tipsStyle: {
					// backgroundColor: '#f1f1f1'
				},
				// 自定义菜单项的样式
				itemStyle: {
					// fontSize: '60rpx',
					// color: '#55007f'
				},
				// 自定义取消按钮的样式
				cancleStyle: {
					// backgroundColor: '#e1e0ff'
				},
				list: [{
						text: '菜单1'
					},
					{
						text: '菜单2',
						subText: '描述'
					},
					{
						text: '菜单3',
						subText: '这一项被禁用了',
						disabled: true,
					},
					{
						text: '菜单4'
					}
				]
			}
		},
		methods: {
			open() {
				this.show = true
			},
			click(e) {
				console.log(e);
			}
		}
	}
</script>

<style lang="scss">
</style>
